<template>
  <el-dialog
    title="编辑房源信息"
    :visible.sync="dialogData.showEditDialog"
    width="550px"
    @close="cancelForm"
  >
    <!--
            表单校验
                el-form 标签加上 ref    :model      :rules 三个标签
                el-form-item 标签设置对应的 prop 属性
                props || data 设置对应的模型
    -->
    <el-form
      ref="model"
      :model="model"
      :rules="rules"
      :label-position="labelPosition"
      :label-width="formLabelWidth"
    >
      <el-form-item label="房屋名" prop="name">
        <el-input v-model="model.name"></el-input>
      </el-form-item>

      <el-form-item label="城市" prop="cityName">
        <el-select v-model="model.cityName" placeholder="请选择城市">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="地段" prop="address">
        <el-input v-model="model.address"></el-input>
      </el-form-item>
      <el-form-item label="户型" prop="type">
        <el-input v-model="model.type"></el-input>
      </el-form-item>
      <el-form-item label="楼层" prop="floor">
        <el-input v-model="model.floor"></el-input>
      </el-form-item>

      <el-form-item label="周边" prop="periphery">
        <el-select v-model="value1" multiple placeholder="房源周边有...">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="价格" prop="price">
        <el-input type="number" v-model="model.price" class="numrule"></el-input>
      </el-form-item>

      <el-form-item label="联系方式" prop="contact">
        <el-input type="number" v-model="model.contact" class="numrule" ></el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelForm()">取 消</el-button>
      <el-button type="primary" @click="submitForm()">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: "UserEdit",
  props: {
    // 使用 props 属性接收父组件传递的参数
    dialogData: {
      type: Object,
      default: {
        id: 0,
        showEditDialog: false
      }
    }
  },
  data: function() {
    return {
      // 弹出框设置项
      formLabelWidth: "80px",
      labelPosition: "right",
      model: {
        id: 0,
        name: "",
        address: "",
        type: "",
        contact: "",
        cityName: "",
        floor: "",
        periphery: "",
        price: ""
      },
      value1: [],
      options: [
        {
          value: "香港",
          label: "香港"
        },
        {
          value: "北京",
          label: "北京"
        },
        {
          value: "鹤岗",
          label: "鹤岗"
        },
        {
          value: "成都",
          label: "成都"
        },
        {
          value: "大和民族自治区",
          label: "大和民族自治区"
        },
        {
          value: "西藏",
          label: "西藏"
        },
        {
          value: "新疆",
          label: "新疆"
        }
      ],
      options1: [
        {
          value: "万达广场",
          label: "万达广场"
        },
        {
          value: "游乐园",
          label: "游乐园"
        },
        {
          value: "何师烧烤",
          label: "何师烧烤"
        },
        {
          value: "中学",
          label: "中学"
        },
        {
          value: "小学",
          label: "小学"
        },
        {
          value: "高中",
          label: "高中"
        },
        {
          value: "芭夯兔",
          label: "芭夯兔"
        }
      ],
      rules: {
        name: [
          {
            required: true,
            message: "房屋名不能为空",
            trigger: ["blur", "change"]
          }
        ],
        address: [
          {
            required: true,
            message: "地址不能为空",
            trigger: ["blur", "change"]
          }
        ],
        type: [
          {
            required: true,
            message: "户型不能为空",
            trigger: ["blur", "change"]
          }
        ],
        contact: [
          {
            required: true,
            message: "联系方式不能为空",
            trigger: ["blur", "change"]
          }
        ],
        cityName: [
          {
            required: true,
            message: "所在城市不能为空",
            trigger: ["blur", "change"]
          }
        ],
        floor: [
          {
            required: true,
            message: "所在楼层不能为空",
            trigger: ["blur", "change"]
          }
        ],
        price: [
          {
            required: true,
            message: "请输入价格",
            trigger: ["blur", "change"]
          }
        ],
        periphery: [
          {
            required: false,
            message: "周边地区不能为空",
            trigger: ["blur", "change"]
          }
        ]
      }
    };
  },
  methods: {
    cancelForm: function() {
      this.dialogData.showEditDialog = false;
      this.value1 = [];
    },
    submitForm: function() {
      // 这里的model要和<el-form ref="model">中的model一致
      this.$refs["model"].validate(isValid => {
        if (!isValid) return;
        console.log(this.model);
        var type = this.model.id == 0 ? "post" : "put";
        var self = this;
        self.model.periphery = self.value1.join("/");
        $.ajax({
          url: "http://127.0.0.1:8000/api/house/changehouse",
          type: type,
          contentType: "application/json",
          data: JSON.stringify(self.model),
          success: function(rs) {
            if (rs.status == 200) {
              self.$message.success(rs.message);
              self.$refs["model"].resetFields();
              self.dialogData.showEditDialog = false;
              self.$emit("emitDialogData", self.dialogData.showEditDialog);
            } else {
              self.$message.info(rs.message);
            }
          },
          error: function(data) {
            // TODO
          }
        });
      });
    }
  },
  watch: {
    dialogData: function(newVal, oldVal) {
      if (newVal.id == 0) {
        // 新增
        if (typeof this.$refs["model"] != "undefined") {
          this.model = {
            id: 0,
            name: "",
            address: "",
            type: "",
            contact: "",
            cityName: ""
          };
          this.$refs["model"].resetFields();
        }
      } else {
        // 编辑
        var url = "/api/house/getHouse/" + this.dialogData.id;
        var self = this;
        $.ajax({
          url: "http://127.0.0.1:8000" + url,
          type: "get",
          success: function(rs) {
            self.model = rs;
            self.value1 = self.model.periphery.split(",");
          },
          error: function(data) {
            // TODO
          }
        });
      }
    }
  }
};
</script>
<style scoped>
.el-select,
.el-input {
  width: 240px;
  float: left;
  margin-left: 10px;
}
.el-input input::-webkit-outer-spin-button,
.el-input input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
.el-input input[type="number"] {
  -moz-appearance: textfield;
}
.el-input .el-input__inner {
  line-height: 1px !important;
}
::v-deep .numrule input::-webkit-outer-spin-button,
::v-deep .numrule input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
::v-deep .numrule input[type="number"] {
  -moz-appearance: textfield !important;
}


</style>
